<template>
    <div class="Mydynamic">
        <div class="Mydynamic-head">
            <span>我的动态</span>
        </div>
        <div class="Mydynamic-content">
            <div class="Mydynamic-content-dynamiclist" v-for="(item,index) in mynote" :key="index">
                <div class="Mydynamic-content-dynamiclist-head">
                    <label>
                        <img :src="item.map.userinfo.avatar" alt="">
                    </label>
                    <label>
                        <span>{{item.map.userinfo.nick_name}}</span>
                        <span>{{item.create_time}}前</span>
                    </label>
                </div>
                <div class="dynamiclist-content">
                    <label class="contents-info">
                        <span>{{item.content}}</span>
                        <!-- <span>其他</span> -->
                    </label>
                    <ul class="contents-infoimg" v-if="item.pcits[0][0] !== ''">
                        <li v-for="(picts,ind) in item.pcits[0]" :key="ind">
                            <!-- <img :src="picts" alt="" v-image-preview> -->
                            <el-image 
                                :src="picts" 
                                :preview-src-list="item.pcits[0]"
                                class="elimg">
                            </el-image>
                        </li>
                    </ul>
                    <ul class="givealike" v-if="item.like_count !=0">
                        <li v-for="(likeinfo,likeinfoindex) in item.map.likeinfo" :key="likeinfoindex">
                            {{likeinfo.nick_name}}，
                        </li>
                    </ul>
                    <ul class="operation">
                        <li>
                            <img src="/images/礼物.png" alt="">
                            <span>{{item.map.giftCount}}</span>
                        </li>
                        <li>
                            <img src="/images/分享.png" alt="">
                            <span>{{item.like_count}}</span>
                        </li>
                        <li @click="Tocomments(index)">
                            <img src="/images/图层 36@2x.png" alt="">
                            <span>{{item.comment_count}}</span>
                        </li>
                        <li>
                            <img src="/images/点赞.png" alt="" v-if="item.like_count == 0" @click="dianzan(item.user_id)">
                            <img src="/images/已经点赞.png" alt="" v-if="item.like_count" @click="dianzan(item.user_id)">
                            <span>{{item.map.likeinfo.length}}</span>
                        </li>
                    </ul>
                    <label class="theInputcomments" v-show="Iscomments && commentsShow == index">
                        <img :src="unserinfo.avatar" alt="">
                        <el-input
                            placeholder="请输入内容"
                            v-model="Inputcomments"
                            clearable>
                        </el-input>
                        <span @click="insertComment(item)">评论</span>
                    </label>
                    <div v-for="(notes,notesindex) in item.map.noteCommentEntities" :key="notesindex">
                        <div v-if="notes.is_reply">
                            <div class="comments-content" @click.stop="Tocomments(index,notes.id)" v-if="item.map.replyinfo">
                                <label>
                                    <label>
                                        <img :src="notes.map.userinfo.avatar" alt="">
                                    </label>
                                    <label>
                                        <span>{{notes.map.userinfo.nick_name}}</span>
                                        <span>{{notes.content}}</span>
                                        <span>{{notes.create_time}}前</span>
                                    </label>
                                </label>
                            </div>
                            <div class="reply-content" @click.prevent="Tocomments(index,notes.id)">
                                <label>
                                    <label>
                                        <img :src="notes.map.userinfo.avatar" alt="">
                                    </label>
                                    <label class="reply-infos">
                                        <span>{{notes.map.userinfo.nick_name}}</span>
                                        <span style="color:#C2C2C2">回复</span>
                                        <img :src="notes.map.replyinfo.avatar" alt="">
                                        <span>{{notes.map.replyinfo.nick_name}}</span>
                                        <span>{{notes.content}}</span>
                                        <span class="toreplys" @click="ToRepalsy(notes)">回复</span>
                                        <span class="replaystimed">{{notes.create_time}}前</span>
                                        <div class="thereplaysinput" v-show="Isreplays">
                                            <el-input
                                            :placeholder=" '回复'+notes.map.userinfo.nick_name"
                                            v-model="Inputcomments"
                                            clearable>
                                        </el-input>
                                        <span>回复</span>
        
                                        </div>
                                    </label>
                                </label>
                            </div> 
                            
                        </div>
                        <div v-else>
                            <div class="comments-content" @click.stop="Tocomments(index,notes.id)">
                                <label>
                                    <label>
                                        <img :src="notes.map.userinfo.avatar" alt="">
                                    </label>
                                    <label>
                                        <span>{{notes.map.userinfo.nick_name}}</span>
                                        <span>{{notes.content}}</span>
                                        <span>{{notes.create_time}}前</span>
                                    </label>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="load-more mr-bottom"  @click='loadMore' >点击加载更多</div>
            <!-- <div class="load-more mr-bottom"  >没有更多了</div> -->
        </div>
    </div>
</template>
<script>
export default {
    name:'Mydynamic',
    data(){
        return{
            Inputcomments:'',
            unserinfo:JSON.parse(localStorage.getItem('userinfo')),
            Iscomments:false,
            mynote:[],
            picts:[],
            currentPage:1,
            page_count: '',
            Isreplays:false,
            differenceYear:-1,
            differenceMonth:-1,
            differenceDay:-1,
            differenceHours:-1,
            differenceMinutes:-1,
            differenceSeconds:-1,
            commentsShow:-1,
            showId:-1,
            
        }
    },
    created:function(){
        this.GetnoteUser()
    },
    methods:{
        dianzan(history_id){
            let data = {
                user_id :this.unserinfo.user_id,
                history_id :history_id,
                history_type :'note',//'curiosityviewpoint',
                operation_type :'like',
            }
            this.$axios({
                method:'POST',
                url:'http://101.37.66.151:8768/eg-api/message/history/insert',
                data:data,
                }).then((res) =>{
                    console.log(res.data.data)
                    
                }).catch((error) =>{
                    console.log(error)
            })
        },
        handleTime(oldTime){
            let d = new Date(oldTime)
            let b = d.getTime(d)
            let now = new Date()
            let nowT = now.getTime(now)
            let chazhi = nowT - b
            if(Math.floor(chazhi/946080000000) !== 0){//年
                return Math.floor(chazhi/946080000000) + '年'
            }else if(Math.floor(chazhi/2592000000) !== 0){
                return Math.floor(chazhi/2592000000)  + '月'
            }else if(Math.floor(chazhi/86400000) !== 0){
                return Math.floor(chazhi/86400000)  + '天'
            }else if(Math.floor(chazhi/3600000) !== 0){
                return Math.floor(chazhi/3600000)  + '小时'
            }else if(Math.floor(chazhi/60000) !== 0){
                return Math.floor(chazhi/60000)  + '分钟'
            }else if(Math.floor(chazhi/1000) !== 0){
                return Math.floor(chazhi/1000)  + '秒'
            }
        },
        insertComment(item){
            console.log(this.Inputcomments)
            let parent_id;
            if(this.showId == -1){
                parent_id = item.id
            }else{
                parent_id = this.showId
            }
            let data = {
                content:this.Inputcomments,
                note_id:item.id,
                parent_id:parent_id,
                user_id: this.unserinfo.user_id,
            }
            this.$axios({
                method:'POST',
                url:'http://101.37.66.151:8768/eg-api/message/noteComment/insert',
                data:data,
                }).then((res) =>{
                    console.log(res)
                    if(res.data.code == 0){
                        this.Iscomments = false
                        this.showId = -1
                        this.Inputcomments = ''
                        this.GetnoteUser()
                    }
                }).catch((error) =>{
                    console.log(error)
            })

        },
        Tocomments(index,id){
            console.log(index,id,'haha')
            if(id !== undefined){
                if(this.showId == -1){
                    this.showId = id
                    this.commentsShow = index
                    this.Iscomments = !this.Iscomments
                }else{
                    if(id == this.showId){
                        this.Iscomments = !this.Iscomments
                        this.commentsShow = index
                    }else{
                        this.commentsShow = index
                        this.showId = id
                    }
                }
                
            }else{
                this.Iscomments = !this.Iscomments
                this.commentsShow = index
            }
        },
        loadMore(){
            this.currentPage +=1
            var data ={
                currentPage:this.currentPage,
                pageSize:10
            }
            this.$axios({
                method:'get',
                url:'http://101.37.66.151:8768/eg-api/message/noteUser/queryListPage',
                params:data,
                }).then((res) =>{
                    this.mynote = this.mynote.concat(res.data.data)   
                    this.mynote.forEach(e => {
                        var arr = []
                        var ss = e.picts.split(',')
                        arr.push(ss)
                        e['pcits'] = arr 
                    });
                    console.log(this.mynote)
                }).catch((error) =>{
                    console.log(error)
            })
        },
        GetnoteUser(){
            var data ={
                currentPage:this.currentPage,
                pageSize:10
            }
            this.$axios({
                method:'get',
                url:'http://101.37.66.151:8768/eg-api/message/noteUser/queryListPage',
                params:data,
                }).then((res) =>{
                    this.mynote = res.data.data    
                    this.mynote.forEach(e => {
                        var arr = []
                        var ss = e.picts.split(',')
                        arr.push(ss)
                        e['pcits'] = arr 
                        e.create_time = this.handleTime(e.create_time)
                        if(e.map.noteCommentEntities.length !== 0){
                            e.map.noteCommentEntities.forEach(info=>{
                                info.create_time = this.handleTime(info.create_time)
                            })
                        }
                        
                    });
                    console.log(this.mynote,"评论" )
                }).catch((error) =>{
                    console.log(error)
            })
        },
        ToRepalsy(item){
            console.log(item)
            this.Isreplays = !this.Isreplays
        }
    }
}
</script>
<style lang="less" scoped>
.elimg{
    /deep/.el-icon-circle-close {
      color: white;
    }
}
    .Mydynamic{
        position: relative;
        width: 100%;
        background: #ffffff;
        border-radius: 20px;
        padding-bottom: 100px;
    }
    .Mydynamic-head{
        position: relative;
        width: 90%;
        height: 80px;
        border-bottom: 2px solid #47CECF;
        margin: 0 auto;
        display: flex;
        align-items: center;
        span{
            border-left: 14px solid #47CECF;
            color: #2DC7C8;
            font-size: 20px;
            font-weight: bold;
            width: 40%;
            padding-left: 1%;
        }
    }
    .Mydynamic-content{
        position: relative;
        width: 86%;
        margin: 0 auto;
        margin-top: 60px;
    }
    .Mydynamic-content-dynamiclist{
        position: relative;
        width: 100%;
        margin-top: 30px;
    }
    .Mydynamic-content-dynamiclist-head{
        position: relative;
        width: 100%;
        height: 70px;
        display: flex;
        align-items: center;
        label{
            display: flex;
            &:first-child{
                width: 8%;
                height: 60px;
                display: flex;
                img{
                    width: 60px;
                    border-radius: 30px;
                }
            }
            &:last-child{
                width: 90%;
                flex-wrap: wrap;
                span{
                    display: inline-block;
                    width: 100%;
                    height: 30px;
                    line-height: 30px;
                    &:first-child{
                        color: #363636;
                        font-size: 16px;
                    }
                    &:last-child{
                        color: #C2C2C2;
                        font-size: 12px;
                    }
                }
            }
        }
    }
    /*动态详情*/
    .dynamiclist-content{
        position: relative;
        width: 100%;
        border-bottom: 2px solid #f1f1f1;
        padding-bottom: 60px;
    }
    .contents-info{
        position: relative;
        width: 90%;
        margin: 0 auto;
        display: flex;
        height: 40px;
        align-items: center;
        span{
            &:first-child{
                background-image: url('/images/翻译.png');
                background-repeat: no-repeat;
                background-size: 21px;
                padding-left: 3%;
                color: #373737;
                font-size: 14px;
                width: 100%;
            }
            // &:last-child{
            //     border:1px solid rgba(70,204,205,1);
            //     width: 14%!important;
            //     text-align: center;
            //     height: 20px;
            //     line-height: 20px;
            //     border-radius: 5px;
            //     color: #46CCCD;
            //     margin-left: 2%;
            // }
        }
    }
    .contents-infoimg{
        position: relative;
        width: 90%;
        margin: 0 auto;
        margin-top: 30px;
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        padding: 0;
        padding-left: 4%;
        justify-content: space-between;
        li{
            width: 28%;
            height: 180px;
            overflow: hidden;
            margin-top: 10px;
            img{
                width:auto;
                height:auto;
                max-width:100%;
                max-height:100%;
                border-radius: 15px;
            }
        }
    }
    .contents-infoimg::after{
        content: '';
        width: 33%;
        border:1px solid transparent;
    }
    .givealike{
        position: relative;
        width: 90%;
        margin: 0 auto;
        margin-top: 10px;
        list-style: none;
        height: 40px;
        display: flex;
        padding: 0;
        padding-left: 8%;
        align-items: center;
        background-image: url('/images/点赞.png');
        background-repeat: no-repeat;
        background-size: 16px;
        background-position-x: 6%;
        background-position-y: 50%;
        overflow: hidden;
        li{
            width: auto;
        }
    }
    .operation{
        position: relative;
        width: 90%;
        margin: 0 auto;
        margin-top: 10px;
        list-style: none;
        height: 40px;
        display: flex;
        padding: 0;
        padding-left: 4%;
        align-items: center;
        li{
            width: 10%;
            height: 40px;
            line-height: 40px;
            img{
                width: 16px;
                cursor: pointer;
            }
            span{
                margin-left: 20%;
                color: #B5B5B5;
                font-size: 14px;
            }
        }
    }
    .theInputcomments{
        position: relative;
        width: 86%;
        margin: 0 auto;
        display: flex;
        height: 40px;
        margin-top: 30px;
        img{
            width: 34px;
        }
        /deep/.el-input{
            width: 80%;
            margin-left: 2%;
            height: 30px;
        }
        span{
            display: inline-block;
            width: 10%;
            height: 40px;
            text-align: center;
            line-height: 40px;
            background:rgba(68,199,199,1);
            border-radius:10px;
            margin-left: 2%;
            color: #FFFFFF;
            font-size: 12px;
            cursor: pointer;
        }
    }
    .comments-content{
        position: relative;
        width: 86%;
        margin:  0 auto;
    }
    .comments-content>label{
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        margin-top: 30px;
        img{
            width: 34px;
            height: 34px;
            border-radius: 20px;
        }
    }
    .comments-content>label>label,.reply-content>label>label{
        display: flex;
        width: 78%;
        height: 60px;
        align-items: center;
        font-size: 12px;
        &:first-child{
            width: auto;
        }
        &:last-child{
            width: 80%;
            display: flex;
            flex-wrap: wrap;
            span{
                display: inline-block;
                width: 60%;
                height: 20px;
                line-height: 20px;
                margin-left: 2%;
                &:first-child{
                    width: auto;
                }
                &:last-child{
                    color: #C2C2C2;
                }
            }
        }
    }
    .reply-content{
        position: relative;
        width: 90%;
        margin:  0 auto;
    }
    .reply-content>label{
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        min-height: 100px;
        align-items: center;
        background:rgba(246,246,246,1);
        border-radius: 10px;
        img{
            width: 34px;
            height: 34px;
            border-radius: 20px;
            margin-left: 20px;
        }
    }
    .reply-infos{
        width: 80%;
        display: flex;
        flex-wrap: wrap;
        
        align-items: center;
        span{
            width: auto!important;
        }
    }
    .replaystimed{
        width: 80%!important;
        color: #C2C2C2;
    }
    .load-more{
        position: relative;
        width: 100%;
        height: 40px;
        margin-top: 40px;
        text-align: center;
        cursor: pointer;
        line-height: 40px;
        color: #30C4C4;
        font-size: 14px;
    }
    .toreplys{
        margin-left: auto!important ;
        cursor: pointer;
    }
    .toreplys:hover{
        color: red;
    }
    .thereplaysinput{
        position: relative;
        width: 100%;
        /deep/.el-input{
            width: 60%;
            margin-top: 10px;
            margin-left: 2%;
        }
        
    }
    .thereplaysinput>span{
        display: inline-block;
        width: 16%!important;
        height: 40px!important;
        text-align: center!important;
        line-height: 40px!important;
        background: #44c7c7!important;
        border-radius: 10px!important;
        margin-left: 2%!important;
        color: #FFFFFF!important;
        font-size: 12px!important;
        cursor: pointer;
    }
</style>